<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { getallticket } from '@/api/ticket'

// 状态数据
const tableData = ref([])
const loading = ref(false)
const total = ref(0)

// 搜索和分页参数
const queryParams = reactive({
  type: '',
  pageNum: 1,
  pageSize: 10
})

// 票种选项
const typeOptions = [
  { value: 'standing', label: '站票' },
  { value: 'inner field', label: '内场' },
  { value: 'bleachers', label: '看台' }
]

// 获取票务列表
const getTicketList = async () => {
  loading.value = true
  try {
    const response = await getallticket()
    if (response.code === 1 && response.data) {
      // 根据选择的票种进行过滤
      let filteredData = response.data
      if (queryParams.type) {
        filteredData = filteredData.filter(
          (item) => item.type === queryParams.type
        )
      }

      // 计算分页
      total.value = filteredData.length
      const start = (queryParams.pageNum - 1) * queryParams.pageSize
      const end = start + queryParams.pageSize
      tableData.value = filteredData.slice(start, end)
    }
  } catch (error) {
    console.error('获取票务列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 获取票种标签类型
const getTagType = (type) => {
  const types = {
    standing: 'success',
    'inner field': 'primary',
    bleachers: 'warning'
  }
  return types[type] || 'info'
}

// 获取票种中文名称
const getTicketTypeLabel = (type) => {
  const types = {
    standing: '站票',
    'inner field': '内场',
    bleachers: '看台'
  }
  return types[type] || type
}

// 格式化时间数组
const formatTimeArray = (timeArr) => {
  if (!Array.isArray(timeArr) || timeArr.length < 5) return ''
  const [year, month, day] = timeArr
  return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
}

// 格式化价格
const formatPrice = (price) => {
  return `¥${(price / 100).toFixed(2)}`
}

// 表格样式
const headerStyle = {
  backgroundColor: '#f8fafc',
  color: '#1e293b',
  fontWeight: '600',
  fontSize: '14px',
  height: '48px'
}

const cellStyle = {
  fontSize: '14px',
  padding: '12px 0'
}

// 搜索和重置处理
const handleSearch = () => {
  queryParams.pageNum = 1
  getTicketList()
}

const handleReset = () => {
  queryParams.type = ''
  handleSearch()
}

// 分页处理
const handleSizeChange = (val) => {
  queryParams.pageSize = val
  getTicketList()
}

const handleCurrentChange = (val) => {
  queryParams.pageNum = val
  getTicketList()
}

// 初始化
onMounted(() => {
  getTicketList()
})
</script>

<template>
  <div class="ticket-list">
    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="hover">
      <!-- 添加标题 -->
      <div class="card-header">
        <h2 class="title">票务管理</h2>
        <div class="subtitle">管理演出门票信息</div>
      </div>

      <el-form :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="票种">
          <el-select
            v-model="queryParams.type"
            placeholder="选择票种"
            clearable
            class="ticket-select"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :icon="Search"
            @click="handleSearch"
            class="search-btn"
          >
            搜索
          </el-button>
          <el-button :icon="Refresh" @click="handleReset" class="reset-btn">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        stripe
        style="width: 100%"
        :header-cell-style="headerStyle"
        :cell-style="cellStyle"
      >
        <el-table-column type="index" label="序号" width="70" align="center" />
        <el-table-column
          prop="ticketId"
          label="票务ID"
          width="90"
          align="center"
        />
        <el-table-column
          prop="performId"
          label="演出ID"
          width="90"
          align="center"
        />
        <el-table-column prop="type" label="票种" width="130">
          <template #default="{ row }">
            <el-tag :type="getTagType(row.type)" effect="light">
              {{ getTicketTypeLabel(row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="130" align="right">
          <template #default="{ row }">
            <span class="price">{{ formatPrice(row.price) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="180">
          <template #default="{ row }">
            <span class="time">{{ formatTimeArray(row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" min-width="180">
          <template #default="{ row }">
            <span class="time">{{ formatTimeArray(row.updateTime) }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.ticket-list {
  padding: 24px;
  background-color: #f1f5f9;
  min-height: 100vh;
}

.card-header {
  margin-bottom: 24px;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px 0;
}

.subtitle {
  font-size: 14px;
  color: #64748b;
}

.search-card,
.table-card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.search-card {
  margin-bottom: 24px;
  padding: 24px;
}

.table-card {
  padding: 24px;
}

.search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.ticket-select {
  width: 180px;
}

.search-btn {
  padding: 0 24px;
  height: 36px;
  transition: all 0.3s ease;
}

.reset-btn {
  padding: 0 20px;
  height: 36px;
}

.price {
  color: #10b981;
  font-weight: 600;
}

.stock-warning {
  color: #ef4444;
  font-weight: 600;
}

.time {
  color: #64748b;
}

:deep(.el-tag) {
  padding: 6px 12px;
  font-weight: 500;
  border: none;
}

:deep(.el-pagination) {
  margin-top: 24px;
  justify-content: flex-end;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #f8fafc;
}

:deep(.el-table__body tr:hover > td) {
  background-color: #f1f5f9 !important;
}

:deep(.el-form-item) {
  margin-bottom: 0;
}

:deep(.el-button) {
  font-weight: 500;
}

:deep(.el-select .el-input__wrapper) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #1e293b;
}
</style>
